<template>
  <div class="left">
    <!-- <dv-scroll-board :config="config" style="width: 1500px;height:353px" class="left_item" /> -->
    <div class="left_item" ref="">
      <h5 class="left_item_title">党员结构分析</h5>
      <!-- <dv-scroll-board :config="config" style="width: 1450px;height:500px;" class="left_item1_con" /> -->
      <div ref="leftItem1" class="left_item_con"></div>
    </div>
    <div class="left_item" ref="">
      <h5 class="left_item_title">活动区域分布图</h5>
      <div ref="leftItem2" class="left_item_con"></div>
    </div>
    <div class="left_item" ref="">
      <h5 class="left_item_title">党员积分排行榜</h5>
      <div ref="leftItem3" class="left_item_con"></div>
    </div>
    <!-- <div class="left_item" ref="leftItem1"></div> -->
    <!-- <div class="left_item" ref="leftItem4"></div> -->
  </div>
</template>

<script>
require("echarts-countries-js/echarts-countries-js/china")
import right1 from "./data/right1"
import right2 from "./data/right2"
import right3 from "./data/right3"
export default {
  data() {
    return {
      config:{
        headerHeight: 75,
        // header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ]
      }
    }
  },
  mounted() {
    this.drawLine1()
    this.drawLine2()
    this.drawLine3()
    // this.drawLine4()
  },
  methods: {
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.leftItem1);
      // 绘制图表
      myChart.setOption(right1);
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.leftItem2);
      // 绘制图表
      myChart.setOption(right2);
    },
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.leftItem3);
      // 绘制图表
      myChart.setOption(right3);
    },
    // drawLine4() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(this.$refs.leftItem4);
    //   // 绘制图表
    //   myChart.setOption(left1);
    // },
  }
}
</script>

<style scoped>
.left{
  position: absolute;
  right: 0;
  top: 200px;
  width: 1500px;
  height: 1960px;
  display: flex;
  flex-direction: column;
}
.left_item{
  flex: 1;
  -webkit-box-shadow: 0 0 3px #00f;
  box-shadow: 0 0 3px #00f;
  /* -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; */
  background-color: rgba(6,30,93,.5);
  border-top: 2px solid rgba(1,153,209,.5);
  /* padding: 0 30px; */
}
.left_item_con{
  height: 550px;
}
.left_item_title{
  font-size: 30px;
  line-height: 75px;
  margin: 0;
}
.left_item + .left_item{
  margin-top: 30px;
}
.left_item1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.left_item1_con{
  position: absolute;
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
}
/* {
  width: 20%;
  -webkit-box-shadow: 0 0 3px #00f;
  box-shadow: 0 0 3px #00f;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(6,30,93,.5);
  border-top: 2px solid rgba(1,153,209,.5);
  padding: 0 30px;
} */
</style>